import React, { Component } from "react";

/*
  事件传参的问题

  1. 直接内联地使用this.xxx.bind(this, 1)
    bind不仅可以改变this指向，会产生新函数，并且bind的第二个参数，会作为新函数的第一个参数，并且新函数不会自动调用
    不推荐，产生新函数会占内存

  2. 内联地使用箭头函数onClick={() => this.xxx(1)}
    外面套了一层箭头函数，点击的时候执行外层函数，里层自动调用
    不是特别推荐，每次点击的事件，内存是不一样
    但是这是平时用的最多的方式

  3. 使用柯里化函数
    比较推荐的写法
*/

class App extends Component {
  // fn = (n) => {
  //   console.log(n);
  // };

  // 柯里化函数
  fn = (n) => {
    return () => {
      console.log(n);
    };
  };
  // fn = (n) => () => {
  //   console.log(n);
  // };

  fn2 = (n) => {
    // 只有event对象是在里层的
    return (e) => {
      console.log(n, e);
    };
  };

  fn3 = (n, e) => {
    console.log(n, e);
  };

  render() {
    return (
      <>
        <h2>事件传参</h2>
        {/* <button onClick={this.fn.bind(this, 1)}>btn</button>
        <button onClick={this.fn.bind(this, 2)}>btn2</button> */}

        {/* <button onClick={() => this.fn(1)}>btn</button>
        <button onClick={() => this.fn(2)}>btn2</button> */}

        {/* <button onClick={this.fn(1)}>btn</button>
        <button onClick={this.fn(2)}>btn2</button>
        <button onClick={this.fn2(8)}>btn2</button> */}

        <button onClick={(e) => this.fn3(222, e)}>btn2</button>
      </>
    );
  }
}

export default App;
